import React from 'react'
import { Toast, NavBar ,ProductCard, Tag,Button, Flex  } from 'react-vant';
import { useNavigate ,useLocation ,useParams } from 'react-router-dom';
import { useSelector ,useDispatch } from 'react-redux';
import { BAGLIST ,STORETYPE,PROPSTYPE} from '../Type/Store.d';

function Detail() {
    const Navigate = useNavigate();
    const Location = useLocation();
    const Params = useParams();
    const Dispatch = useDispatch();
    let childrenList = useSelector((state:STORETYPE)=>state.childrenList);
    let obj = childrenList.find(item=> item.id == Params.id) as PROPSTYPE;

    // let list = useSelector((state:STORETYPE)=>state.list);
    // let listobj = list.find(item=> item.id == Params.id) as PROPSTYPE;
    // console.log(listobj);
    
    return (
        <div className='Detail'>
            <NavBar
                title={obj.txt}
                leftText="返回"
                onClickLeft={() => Navigate(-1)}
            />
            <ProductCard 
                desc={obj.con}
                title={obj.txt}
                tags={ <>
                    <Tag plain type="warning" style={{ marginRight: 5 }}> {obj.sex} </Tag>
                    <Tag plain type="danger"> {obj.type} </Tag>
                </> }
                thumb={obj.src}
            />
            <div style={{display:'flex',justifyContent: 'space-around'}}>
                <Button type="default" onClick={()=>{
                    Dispatch({
                        type:BAGLIST,
                        payload:obj.id
                    })
                    const TimeOut = setTimeout(() => {
                        Navigate('/');
                        clearTimeout(TimeOut)
                    }, 1000);
                    
                }}> {obj.flag ? '已加入书包' :'加入书包'} </Button>
                <Button type="warning" onClick={()=>Navigate('/Reading',{state:obj})}>开始阅读</Button>
                <Button type="default">离线下载</Button>
            </div>
        </div>
    )
}

export default Detail